<template>
  <div class="w950">
    <!-- 个人信息 -->
    <div class="center_box">
      <div class="center_tt">
        我的消息
        <span class="line">
          <s class="l_4"></s>
        </span>
      </div>
      <div class="blk_coin">
        <div class="center_tab">
          <a
            href="#"
            title="我的消息"
            :class="{ current: a }"
            @click="
              a = true;
              b = false;
            "
            >我的消息</a
          >
          <a
            href="#"
            title="消息设置"
            :class="{ current: b }"
            @click="(a = false), (b = true)"
            >消息设置</a
          >
        </div>
        <div class="center_tbl" v-show="a">
          <div class="msg_tab">
            <a
              href="#"
              attr_bigtype="0"
              :class="{ current2: q }"
              @click="
                q = true;
                w = false;
                e = false;
              "
              >全部</a
            >
            <a
              href="#"
              attr_bigtype="2"
              :class="{ current2: w }"
              @click="
                w = true;
                q = false;
                e = false;
              "
              >订阅消息</a
            >
            <a
              href="#"
              attr_bigtype="1"
              :class="{ current2: e }"
              @click="
                e = true;
                q = false;
                w = false;
              "
              >系统消息</a
            >
          </div>
          <!-- 我的消息 -->
          <div class="tbl_con">
            <div class="pic"></div>
            <div class="txt">
              <p class="tt">
                抱歉，此页面暂无消息！您可能未关注活动或者活动未更新消息。
              </p>
              <p>您可以：</p>
              <p>
                1、进入道聚城首页参加更多热门活动，<a href="#" class="blue"
                  >立即前往></a
                >
              </p>
            </div>
          </div>
        </div>
        <!-- 消息设置 -->
        <div class="center_tbl" v-show="b">
          <div class="set_list">
            <table class="tbl_con2" width="100%">
              <thead>
                <tr>
                  <th width="20%">消息类型</th>
                  <th width="50%">请选择游戏</th>
                  <th width="30%">获得消息途径</th>
                </tr>
              </thead>
              <tbody>
                <tr type_id="2">
                  <td>AMS活动订阅</td>
                  <td>
                    <span class="biz_name_list"></span>
                    <a href="#" class="blue btn_set">[设置]</a>
                  </td>
                  <td class="pr">
                    <label>
                      <input
                        class="default diy_channel"
                        checked="checked"
                        type="radio"
                        name="tip_2"
                        value="0"
                      />系统默认
                    </label>
                    <label>
                      <input
                        class="choose diy_channel"
                        type="radio"
                        name="tip_2"
                        value="1"
                      />自定义
                    </label>
                  </td>
                </tr>
                <tr type_id="3">
                  <td>道具赠送&打赏</td>
                  <td>全部</td>
                  <td class="pr">
                    <label>
                      <input
                        class="default diy_channel"
                        checked="checked"
                        type="radio"
                        name="tip_3"
                        value="0"
                      />系统默认
                    </label>
                    <label>
                      <input
                        class="choose diy_channel"
                        type="radio"
                        name="tip_3"
                        value="1"
                      />自定义
                    </label>
                  </td>
                </tr>
                <tr type_id="4">
                  <td>退款提醒</td>
                  <td>全部</td>
                  <td class="pr">
                    <label>
                      <input
                        class="default diy_channel"
                        checked="checked"
                        type="radio"
                        name="tip_4"
                        value="0"
                      />系统默认
                    </label>
                    <label>
                      <input
                        class="choose diy_channel"
                        type="radio"
                        name="tip_4"
                        value="1"
                      />自定义
                    </label>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="favorite">
      <div class="tt">
        <h6 class="fl">猜你喜欢</h6>
        <a href="#" class="more">换一换>></a>
      </div>
      <div class="clearfix">
        <div class="fav_wrapper">
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/app/cf/rectangle/N-cf-undefined-111943-100000-r479.jpg?_t=1647423450"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  火麒麟宝箱（1个）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>6.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/dbm/cf/54KnightSR25.jpg"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  Knight SR25（30天）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>30.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/app/cf/rectangle/N-cf-1-111943-100000-s25273.jpg?_t=1605518493"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  零-水下丽影宝箱（1个）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>6.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/app/cf/rectangle/N-cf-1-111943-103936-s26239.jpg?_t=1612691407"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  春节宝箱（5个）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>28.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/dbm/cf/107XM8-A.jpg"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  ，XM8-A（30天）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>28.90 QB</b>
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rwu10',
  data () {
    return {
      a: true,
      b: false,
      q: true,
      w: false,
      e: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.w950 {
  width: 950px;
  height: 569px;
  .center_box {
    width: 910px;
    height: 290px;
    margin-bottom: 10px;
    padding: 15px 20px 20px 20px;
    border: 1px solid #e6e9ef;
    background: #fff;
    .center_tt {
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      .line {
        display: block;
        background: #e6e9ef;
        height: 1px;
        overflow: hidden;
        margin-top: 5px;
        s.l_4 {
          width: 58px;
          display: block;
          background: #f74a4a;
          height: 1px;
          overflow: hidden;
        }
      }
    }
  }
  .blk_coin {
    width: 908px;
    height: 240px;
    border: 1px solid #e6e9ef;
    background: #fff;
    .center_tbl {
      width: 906px;
      height: 140px;
      // padding: 28px 20px;
      // margin: 28px 0;
      td {
        border-top: 1px solid #e6e9ef;
        padding: 11px 0;
        line-height: 18px;
        text-align: center;
        label {
          margin-left: 20px;
        }
        .blue,
        a.blue {
          color: #1994eb;
        }
      }
      th {
        font-weight: 400;
        font-size: 14px;
        padding: 11px 0;
        line-height: 18px;
        text-align: center;
      }
      .set_list {
        width: 846px;
        height: 163px;
        margin: 10px 0px 0px 40px;
        // background-color: red;
        input {
          vertical-align: -1px;
          margin-right: 5px;
        }
        .tbl_con2 {
          width: 846px;
          height: 163px;
          margin: 10px 0px 0px 0px;
        }

        table {
          border-collapse: collapse;
          border-spacing: 0;
          thead {
            width: 846px;
            height: 40.5px;
          }
          tbody {
            width: 846px;
            height: 122.5;
            tr {
              width: 846px;
              height: 41px;
            }
          }
        }
      }
      .msg_tab {
        width: 846px;
        height: 51px;
        padding: 20px 20px 0px 40px;
        .current2 {
          background: #eb4c4c;
          color: #fff;
        }
        .current2 a:hover {
          text-decoration: none;
          background: #e5e5e5;
          color: #3a3f4a;
        }
        a {
          display: inline-block;
          width: 68px;
          height: 26px;
          border-radius: 2px;
          background: #eee;
          text-align: center;
          line-height: 26px;
          margin-right: 10px;
          text-decoration: none;
          color: #3a3f4a;
          text-decoration: none;
          outline: none;
        }
      }
      .loading {
        display: table;
        width: 100%;
        background: #fff;
        _display: block;
        .loadmsg {
          display: table-cell;
          _display: block;
          vertical-align: middle;
          text-align: center;
          background: url(//daoju.qq.com/becombine/mall/images/loading.gif)
            no-repeat center center;
          padding-top: 110px;
        }
      }
      .vat-hd {
        width: 866px;
        height: 51px;
        border-bottom: 1px solid #d1d1d1;
        zoom: 1;
        list-style: none;
        .od1 {
          width: 122px;
        }
        .od2 {
          width: 200px;
        }
        .od3 {
          width: 150px;
        }
        .od4 {
          width: 206px;
        }
        .od5 {
          width: 174px;
        }
        li {
          float: left;
          text-align: center;
          font-size: 14px;
          height: 50px;
          line-height: 50px;
          overflow: hidden;
        }
      }
      .pic {
        float: left;
        width: 100px;
        height: 100px;
        background: url(//js02.daoju.qq.com/common/images/emotion.png) no-repeat;
      }
      .tbl_con {
        width: 540px;
        height: 120px;
        margin: 0 auto;
        line-height: 24px;
        // padding: 10px 0;
        color: #666;
        // display: none;
        .tt {
          font-weight: 700;
          font-size: 14px;
          color: #333;
          padding-bottom: 10px;
        }
        .txt {
          width: 430px;
          height: 92px;
          margin-left: 110px;
          padding-top: 10px;
          .blue {
            color: #1994ed;
          }
        }
      }
    }
    .center_tab {
      border-bottom: 1px solid #e6e9ef;
      height: 44px;
      a {
        width: 130px;
        height: 44px;
        font-size: 14px;
        line-height: 44px;
        text-align: center;
        border-right: 1px solid #e6e9ef;
        float: left;
        text-decoration: none;
        color: #3a3f4a;
      }
      a.current {
        border-bottom: 1px solid #f74a4a;
      }
    }
  }
}
.favorite {
  width: 950px;
  height: 255px;
  border: 1px solid #e6e9ef;
  background-color: #fff;
  .tt {
    width: 930px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    border-bottom: 1px solid #e6e9ef;
    .fl {
      float: left;
      font-size: 100%;
    }
    .more {
      font-size: 12px;
      color: #1994eb;
      font-family: "\5b8b\4f53";
      float: right;
    }
  }
  .clearfix {
    width: 950px;
    height: 218px;
    dl {
      width: 122px;
      height: 162px;
      padding: 28px 32px;
      border-left: 1px solid #f3f4f6;
      float: left;
      dt {
        width: 122px;
        height: 75px;
        img {
          display: block;
          width: 90px;
          height: 75px;
          margin: 10px auto;
        }
      }
      dd {
        width: 122px;
        height: 60px;
        text-align: center;
        margin-top: 9px;
        .red {
          height: 20px;
          color: #f74a4a;
          margin: 4px 0;
        }
        p {
          height: 37px;
          overflow: hidden;
          a:hover {
            color: #f74a4a;
          }
          .e {
            display: block;
            margin: 2px 0;
          }
          b {
            margin: 2px 0;
          }
        }
      }
    }
  }
}
</style>
